<template>
  <div class="all">
    <div class="order-header">
      <p>
        <i class="el-icon-arrow-left" @click="goBack"></i>
        购物车
      </p>
    </div>
    <div v-if="isshow">
      <div class="box">
        <ul>
          <li v-for="(item,index) in arr" :key="index">
            <div class="li-header">
              <img :src="item.shop_url" />
              <!-- 店铺 -->
              <span>{{item.shop_title}}</span>
              <span class="spanright" @click="del(index)">
                <span>删除订单</span>
              </span>
            </div>
            <div class="li-center">
              <div>
                <input type="checkbox" v-model="item.ischeck" />
              </div>
              <div>
                <img :src="item.img_url" />
              </div>
              <!-- 商品信息 -->
              <div>
                <span>{{item.title}}</span>
              </div>
            </div>
            <div class="li-bottom">
              <!-- 单价 -->
              <p>单价￥{{item.new_price}}</p>
              <!-- 数量 -->
              <div class="li-num">
                <button @click="changenum('-',index)">-</button>
                {{item.num}}
                <button @click="changenum('+',index)">+</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="bottom">
        <!-- 全选 -->
        <div>
          <input type="checkbox" @click="allcheck" :checked="isallcheck" />
          {{!isallcheck?'全选':'取消全选'}}
        </div>
        <div>
          总价:￥
          <span>{{allprice}}</span>
        </div>
        <span @click="open">结算({{allnum}})</span>
      </div>
    </div>
    <div v-else>
      <noorder></noorder>
    </div>
  </div>
</template>
<script>
import noorder from "../Shop-order/no-order/noorder";
export default {
  components: {
    noorder
  },
  data() {
    return {
      //  全选
      isallcheck: false,
      newarr: [],
      arr: [
        {
          name: "第一次充值",
          price: 100,
          num: 1,
          ischeck: false
        }
      ]
    };
  },
  methods: {
    goBack() {
      this.$router.push("/shopCar");
    },
    del(index) {
      this.arr.splice(index, 1);
      sessionStorage.setItem("lists", JSON.stringify(this.arr));
    },
    changenum(state, index) {
      if (state == "-") {
        if (this.arr[index].num == 1) {
          this.arr[index].num = 1;
        } else {
          this.arr[index].num--;
        }
      } else {
        this.arr[index].num++;
      }
    },
    //  全选或全不选
    allcheck() {
      for (let i = 0; i < this.arr.length; i++) {
        this.arr[i].ischeck = !this.isallcheck;
      }
    },
    // 结算
    open() {
      if (this.allnum == 0) {
        this.$message({
          message: "没有选择商品",
          type: "warning"
        });
      } else {
        this.$confirm("是否结算?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "结算成功!"
          });
          // 结算后将状态取消
          for (let i = 0; i < this.arr.length; i++) {
            if (this.arr[i].ischeck == true) {
              this.arr[i].ischeck = false;
              // 结算后将商品数据存储到send数组中 待发货
              let send = JSON.parse(sessionStorage.getItem("send")) || [];
              send.push(this.arr[i]);
              sessionStorage.setItem("send", JSON.stringify(send));
            }
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消结算"
          });
        });
      }
    }
  },
  computed: {
    //  判断是否有订单
    isshow() {
      //  接收浏览器购物车数据
      let lists = JSON.parse(sessionStorage.getItem("lists")) || [];
      this.arr = lists;

      let newshow = true;
      if (this.arr.length == 0) {
        newshow = false;
      } else {
        newshow = true;
      }
      return newshow;
    },
    //  单选和计算总数量
    allnum() {
      let num = 0;
      this.isallcheck = true;
      this.arr.forEach(v => {
        if (!v.ischeck) {
          this.isallcheck = false;
        } else {
          num += v.num;
        }
      });
      return num;
    },
    //  单选和计算价格
    allprice() {
      let price = 0;
      this.isallcheck = true;
      this.arr.forEach(v => {
        if (!v.ischeck) {
          this.isallcheck = false;
        } else {
          price += v.num * v.new_price;
        }
      });
      price = price.toFixed(1);
      return price;
    }
  }
  //  mounted(){
  //    this.isfn();
  //  }
};
</script>

<style lang="scss" scoped>
.all {
  .order-header {
    background-color: white;
    p {
      font-size: 30px;
      line-height: 80px;
      width: 100%;
      text-align: center;
      i {
        float: left;
        line-height: 80px;
        padding-left: 20px;
        font-size: 40px;
      }
    }
  }
  .box {
    margin: 0 20px;
    & > ul {
      & > li {
        margin: 15px;
        border-radius: 10px;
        background-color: white;
        padding: 20px 20px;
        .li-header {
          & > img {
            width: 15px;
            border-radius: 50%;
          }
          .spanright {
            float: right;
            color: orangered;
          }
        }
        .li-center {
          display: flex;
          margin-top: 20px;
          justify-content: space-between;
          div {
            input {
              margin-top: 60px;
            }
          }
          img {
            width: 150px;
            margin: 0 20px;
          }
        }
        & > p {
          display: flex;
          justify-content: flex-end;
        }
        .li-bottom {
          margin-top: 25px;
          color: gray;
          span {
            border-radius: 30px;
            padding: 5px 20px;
            border: 1px solid gray;
          }
          .li-num {
            display: flex;
            justify-content: flex-end;
            p {
              display: inline;
            }
            button {
              padding: 0 10px;
              margin: 0 10px;
              font-size: 20px;
            }
          }
        }
      }
    }
  }
  .bottom {
    position: fixed;
    font-size: 25px;
    bottom: 0;
    display: flex;
    width: 96%;
    padding: 5px 2%;
    background-color: white;
    justify-content: space-between;
    & > span {
      background-color: orangered;
      color: white;
      padding: 20px 20px;
    }
    div {
      padding: 20px 20px;
      span {
        color: orangered;
      }
    }
  }
}
</style>